<template>
  <div class="bundle">
    <el-container>
      <el-container>
        <el-header height="50px"><h3>特惠券包编辑</h3></el-header>
        <el-main>
         <el-form ref="bundle" :model="bundle" :rules="formRules" label-width="140px">
			 <el-row >
				 基本信息：
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="7">
				<el-form-item label="特惠券包CODE：" prop="code">
              		<el-input v-model="bundle.code"></el-input>
				</el-form-item>
            	</el-col>
				<el-col :span="14">
				<el-form-item label="特惠券包名称：" prop="name">
              		<el-input v-model="bundle.name" maxlength="25"></el-input>
				</el-form-item>
            	</el-col>
				<!-- <el-col :span="7">
				<el-form-item label="地区" prop="regionBlockCode">
              		<el-input v-model="bundle.regionBlockCode"></el-input>
				</el-form-item>
            	</el-col> -->
			</el-row>
			<el-row >
				<el-col :span="7">
				<el-form-item label="特惠券包原价：" prop="originalPrice">
              		<el-input v-model="bundle.originalPrice"></el-input>
				</el-form-item>
            	</el-col>
				<el-col :span="7">
				<el-form-item label="特惠券包卖价：" prop="sellPrice">
              		<el-input v-model="bundle.sellPrice"></el-input>
				</el-form-item>
				</el-col>
				<el-col :span="7">
				<el-form-item label="特惠券包库存：" prop="inventoryQty">
              		<el-input v-model="bundle.inventoryQty"></el-input>
				</el-form-item>
            	</el-col>
			</el-row>
			<el-row >
				<el-col :span="7">
				<el-form-item label="活动开始：" prop="showTime">
              		<el-date-picker type="datetime" placeholder="开始日期" v-model="bundle.showTime" style="width: 100%;"></el-date-picker>
				</el-form-item>
            	</el-col>
            	<el-col :span="7">
            	<el-form-item label="活动结束：" prop="finishTime">
              		<el-date-picker placeholder="结束时间" type="datetime" v-model="bundle.finishTime" style="width: 100%;"></el-date-picker>
				</el-form-item>
            	</el-col>
				<el-col :span="7">
            	<el-form-item label="支付时间：" prop="orderTime">
              		<el-date-picker placeholder="支付时间" type="datetime" v-model="bundle.orderTime" style="width: 100%;"></el-date-picker>
				</el-form-item>
            	</el-col>
			</el-row>
			<el-row >
				<el-col :span="7">
				<el-form-item label="设置在售或下架：" prop="status">
            		<el-radio-group v-model="bundle.status">
              			<el-radio label="2">在售</el-radio>
              			<el-radio label="0">下架</el-radio>
            		</el-radio-group>
          		</el-form-item>
            	</el-col>
            	<el-col :span="7">
            	<el-form-item label="特惠券包列表图：">
              		<el-upload
  						class="upload-demo"
  						:action="uploadUrl()"
  						 multiple
  						:limit="1"
						:on-success="smallFileSuccess"
  						:file-list="smallFileList">
  						<el-button size="small" type="primary">点击上传</el-button>
  						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
            	</el-col>
				<el-col :span="7">
            	<el-form-item label="特惠券包详情图：">
              		<el-upload
  						class="upload-demo"
  						:action="uploadUrl()"
  						 multiple
  						:limit="1"
						:on-success="bigFileSuccess"
  						:file-list="BigFileList">
  						<el-button size="small" type="primary">点击上传</el-button>
  						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
            	</el-col>
			</el-row>
			<el-row>
				<el-col :span="14">
				<el-form-item label="规则说明：" prop="description">
              		<el-input
  						type="textarea"
  						:rows="10"
  						placeholder="请输入内容"
  						v-model="bundle.description">
					</el-input>
				</el-form-item>
            	</el-col>
			</el-row>
			
			<template>
  <div class="TestWord">
      <el-button type="primary" @click="addLine">添加行数</el-button>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column prop="bookname" label="绑定券id">
             <template slot-scope="scope">
             <el-input v-model="scope.row.couponId" placeholder="绑定券id" @change="handlerCouponId"></el-input>
             </template>
          </el-table-column>
          <el-table-column prop="bookvolume" label="绑定券数量">
             <template slot-scope="scope">
             <el-input v-model="scope.row.couponNum" placeholder="绑定券数量"></el-input>
             </template>
          </el-table-column>
		  <el-table-column
                  prop="couponName"
                  label="绑定券名称"
                  width="150">
                </el-table-column>
          <el-table-column prop="bookbuytime" label="操作">
             <template slot-scope="scope">
               <el-button
                  size="mini"
                  type="danger"
                  v-if="!scope.row.editing"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)">删除
               </el-button>
             </template>
          </el-table-column>
    </el-table>
  </div>
</template>
			<el-row style="margin-top: 30px; text-align: center;">
				<el-button type="primary" @click="createBundle">保存</el-button>
			</el-row>
         </el-form>
        </el-main>
      </el-container>
    </el-container>
  
  </div>
</template>

<script>
import axios from 'axios';
const BASE_URL = process.env.VUE_APP_API_BASE_URL;
import api from '@/api'
import { isInteger,checkFloat } from "@/utils/validate"; 
export default {
  data() {
    return {
	  currentMenu: '',
	  bundle:{status:'0'},
	  id:this.$route.params.id,
	  smallFileList:[],
	  BigFileList:[],
	  tableData:[],
	   formRules: {
        code: [
          {
            required: true,
            message: "特惠券包CODE不能为空",
            trigger: "blur"
          }
        ],
		name: [
          {
            required: true,
            message: "特惠券包名称不能为空",
            trigger: "blur"
          }
		],
		// regionBlockCode: [
        //   {
        //     required: true,
        //     message: "地区码不能为空",
        //     trigger: "blur"
        //   }
        // ],
		originalPrice: [
          {
            required: true,
            message: "价格不能为空",
            trigger: "blur"
          },{
            validator: checkFloat,
            trigger: "blur"
          }
		],
		sellPrice: [
          {
            required: true,
            message: "价格不能为空",
            trigger: "blur"
          },{
            validator: checkFloat,
            trigger: "blur"
          }
		],
		inventoryQty: [
          {
            required: true,
            message: "库存不能为空",
            trigger: "blur"
          },{
            validator: isInteger,
            trigger: "blur"
          }
        ],
		showTime: [
          {
            required: true,
            message: "时间不能为空",
            trigger: "blur"
          }
		],
		finishTime: [
          {
            required: true,
            message: "时间不能为空",
            trigger: "blur"
          }
		],
		orderTime: [
          {
            required: true,
            message: "时间不能为空",
            trigger: "blur"
          }
		],
		status: [
          {
            required: true,
            message: "设置在售或下架不能为空",
            trigger: "blur"
          }
		],
		description: [
          {
            required: true,
            message: "描述不能为空",
            trigger: "blur"
          }
		]
      }
    };
  },
  	mounted:function(){
		console.log(this.$route.query.id);
		this.id = this.$route.query.id;
		console.log(this.id);
		this.getDetail(this.id);
	},
  methods: {
    getDetail(val) {
		api.bundle.getDetail(val).then(res => {
			 if(res.data.code=200){
				 this.bundle=res.data.data;
				 this.tableData = res.data.data.bundleSubList;
				 this.bundle.status='0';
			 }
    	})
	},
	uploadUrl:function(){
		return `${BASE_URL}/modules/web/common/upload`;
	},
	smallFileSuccess(res, file) {
		console.log(res.data);
		this.bundle.imageSmall=res.data;
	},
	bigFileSuccess(res, file) {
		console.log(res.data);
		this.bundle.imageBig=res.imageBig;
	},
	created(){
		console.log('test');
	},
	createBundle(){
		console.log(this.bundle.imageSmall);
		this.bundle.bundleSubList=this.tableData;
		if(this.bundle.imageSmall==undefined || this.bundle.imageBig==undefined){
			this.$alert('图片不能为空！');
          	return ;
		}
		if(this.bundle.bundleSubList==undefined ||this.bundle.bundleSubList.length==0){
			this.$alert('绑定券信息不能为空！');
          	return ;
		}
		this.$refs['bundle'].validate(valid => {
        if (valid) {
			var param = JSON.stringify(this.bundle);
			api.bundle.updateBundle(JSON.parse(param)).then(res => {
			 	if(res.data.code==200){
					this.$alert('更新成功！');
					this.$router.push({ path:'/bundle'  })
				 }
    		})
			return true;
        } else {
          this.$alert('输入有误请检查后再提交！');
          return 'false';
        }
      });
	},
	addLine(){ //添加行数
            var newValue = {
                  bookname: '',
                  bookbuytime: '',
                  bookbuyer: '',
                  bookborrower: '',
                  bookvolume:''
              };
            //添加新的行数
            this.tableData.push(newValue);
        },
        handleDelete(index){ //删除行数
            this.tableData.splice(index, 1)
        },
        save(){
          //这部分应该是保存提交你添加的内容
          console.log(JSON.stringify(this.tableData))
		},
	handlerCouponId(value){
		api.bundle.handlerCouponId(value).then(res => {
			 if(res.data.code=200){
				 if(res.data.data==undefined ){
					this.$alert('绑定券信息不存在！');
          			return ;
				}
				 for( var i=0;i<this.tableData.length;i++){
					 if(this.tableData[i].couponId == value){
						this.tableData[i].couponName = res.data.data.couponName;
					}
				 }
			 }
    	})
	}
  }
}
</script>

<style lang="scss" scoped>
	.bundle {
		.el-upload__tip {
			line-height: 1.5;
		}
	}
</style>